// 使用history api去实现 跳转页面，监听history的变化。
import {useSyncExternalStore} from "react";

export const useHistory = () => {

  const subscribe = (callback: () => void) => {

    // 订阅浏览器API
    // vue里面路由三种模式：1.ssr用的；2种web用的：history和hash
    // history:底层popstate
    // hash：底层hashchange
    window.addEventListener('popstate', callback);
    window.addEventListener('hashchange', callback);
    // 注：popstate只能监听浏览器的前进和后退按钮，无法监听pushState和replaceState。所以需要手动触发。
    return () => {
      // 取消订阅
      window.removeEventListener('popstate', callback);
      window.removeEventListener('hashchange', callback);
    }
  }
  const getSnapshot = () => {
    return window.location.href
  }
  const url = useSyncExternalStore(subscribe, getSnapshot)

  const push = (url: string) => {
    window.history.pushState({}, '', url);
    window.dispatchEvent(new PopStateEvent('popstate')) // 手动触发
  }
  const replace = (url: string) => {
    window.history.replaceState({}, '', url);
    window.dispatchEvent(new PopStateEvent('popstate'))
  }

  // 每一项的类型是固定的，所以可以定义为元组类型
  return [url, push, replace] as const
  // return [url, push, replace]
}
/**
 * 使用：
 */

// const [url, push, replace] = useHistory()
